<template>
  <div class="relatedDialog">
    <el-dialog
      v-model="visible"
      :before-close="cancel"
      :title="
        relatedParams.businessName
          ? '选择项目(' + relatedParams.businessName + ')'
          : '选择项目'
      "
      width="700"
      @open="getList"
    >
      <el-input
        v-model="searchKey"
        class="mb-10px px-10px w-1/2"
        placeholder="输入项目编号或名称搜索"
        @change="getList"
      >
        <template #append>
          <el-button icon="Search" @click="getList" /> </template
      ></el-input>
      <el-empty v-if="dataArray.length === 0" description="暂无数据" />
      <div v-else id="relatedDialogCnt" class="relatedDialog-cnt">
        <div
          v-for="(item, index) in dataArray"
          :key="index"
          :class="['view', rowCalss(index, item)]"
          @click.prevent="changeIndex(!checkArray[index], index)"
        >
          <div class="header">
            <div class="contrackName">{{ item.proName }}</div>
            <div class="text-gray-400 flex items-center">
              <el-icon class="align-middle mr-3px"><Clock /></el-icon>
              {{ item.createTime }}
            </div>
          </div>
          <div class="check">
            <el-checkbox
              v-model="checkArray[index]"
              :checked="checkArray[index]"
              @change="val => changeIndex(val, index)"
            ></el-checkbox>
          </div>
          <div class="flex justify-between">
            <div class="flex flex-col">
              <span class="mb-7px">项目编码：{{ item.proNum }} </span>
              <span class="mb-7px">项目负责人：{{ item.principal }}</span>
              <!-- <span class="mb-7px">结束日期：{{ item.contractTimeEnd }}</span> -->
            </div>
            <div class="statusBox">
              <dict-drop
                :isDrop="false"
                :options="project_phase"
                :value="item.proSchedule"
              />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="finished">确定</el-button>
        </div>
      </template>

      <pagination
        v-show="pageParams.total > 10"
        v-model:limit="pageParams.pageSize"
        v-model:page="pageParams.pageNum"
        :autoScroll="false"
        :total="pageParams.total"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script name="RelatedProject" setup>
import { getOrdprojectNoPriv } from '@/api/projectManage/project.js'
import { getCurrentInstance } from 'vue'
import { project_phase } from '@/hooks/dict/useProject'

const { proxy } = getCurrentInstance()
const props = defineProps({
  relatedParams: {
    type: Object,
    requeired: true
  }
})
const data = reactive({
  pageParams: {
    total: 0,
    pageNum: 1,
    pageSize: 10
  },
  dataArray: [], // 列表数据
  checkArray: [], // 选中列表
  defaultOpt: [] // 默认选择
})

const visible = computed(() => props.relatedParams.visible) // 显示
const { pageParams, checkArray, dataArray, defaultOpt } = toRefs(data)
const searchKey = ref('') // 搜索项目编号或名称
async function getList() {
  let params = {
    pageNum: pageParams.value.pageNum,
    cusId: props.relatedParams.businessId || '',
    pageSize: pageParams.value.pageSize
  }
  if (searchKey.value) {
    params.proName = searchKey.value
  }
  proxy.$nextTick(() => {
    let dom = document.getElementById('relatedDialogCnt')
    if (dom !== null) {
      dom.scrollTop = 0
    }
  })
  const response = await getOrdprojectNoPriv(params)
  if (response.code === 200) {
    pageParams.value.total = response.total
    dataArray.value = response.rows
    checkArray.value = [...new Array(dataArray.value.length).fill(false)]
    checkIndex.value = 9999
    checkIndexs.value = []
    if (
      props.relatedParams.defaultSelect &&
      props.relatedParams.defaultSelect.length
    ) {
      dataArray.value.filter((v, i) => {
        if (props.relatedParams.defaultSelect.indexOf(v.projectId) > -1) {
          checkArray.value[i] = true
          checkIndexs.value.push(i)
        }
      })
    }
  }
}

const emit = defineEmits(['closeDialog', 'relatedOver'])
function cancel() {
  emit('closeDialog')
  // 重置数据
  searchKey.value = ''
  dataArray.value = []
  pageParams.value = {
    total: 0,
    pageNum: 1,
    pageSize: 10
  }
}

// 确认  传回参数
function finished() {
  const array = dataArray.value
  const index = checkIndex.value
  if (props.relatedParams.multiple) {
    defaultOpt.value = dataArray.value.filter((v, i) => {
      if (checkIndexs.value.indexOf(i) > -1) {
        return v
      }
    })
  } else {
    defaultOpt.value = index != null ? array[index] : {}
  }
  emit('relatedOver', defaultOpt.value)
}
// 选择行
const checkIndex = ref(9999) // 单选
const checkIndexs = ref([]) // 多选
// check选中状态
// const checkedStatus = computed(() => {
//   return checkArray.value[checkIndex.value]
// })
// 改变状态方法
function changeIndex(val, index) {
  checkIndex.value = val ? index : null
  checkArray.value = [...new Array(dataArray.value.length).fill(false)]
  if (val) {
    checkIndexs.value.push(index)
    checkArray.value[index] = true
  } else {
    const findIndex = checkIndexs.value.indexOf(index)
    checkIndexs.value.splice(findIndex, 1)
  }
  // 多选
  if (props.relatedParams.multiple) {
    checkArray.value = checkArray.value.map((v, i) => {
      if (checkIndexs.value.indexOf(i) > -1) {
        return true
      } else {
        return false
      }
    })
  }
}
// 选中行样式
const rowCalss = computed(() => {
  return function (index, row) {
    return checkArray.value[index] ? 'bg-blue-50' : 'bg-#fff'
  }
})
</script>

<style lang="scss" scoped></style>
